<template>
  <n-card>
    <n-form ref="formRef" :model="siteSetting" label-placement="top">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi v-for="item in siteSetting" :key="item.id" :span="12" :label="item.nameZh">
          <n-input v-model:value="item.value" :placeholder="item.nameZh"></n-input>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-space style="display: flex; justify-content: flex-end">
      <n-button type="primary" @click="saveData">
        <TheIcon v-if="!btnLoading" icon="line-md:confirm-circle" class="mr-5" :size="18" /> 保存
      </n-button>
    </n-space>
  </n-card>
</template>

<script setup>
import { getSiteSetting, saveSiteSetting } from '@/api/site/site.js'

const siteSetting = ref()
const btnLoading = ref(false)

const props = defineProps({
  modelType: {
    type: String,
    default: null,
  },
})

const getType = computed(() => {
  if (props.modelType == 'basic') {
    return 1
  } else if (props.modelType == 'dataCard') {
    return 2
  } else if (props.modelType == 'foot') {
    return 3
  }
})

onActivated(() => {
  console.log('onActivated')
  getData()
})

function getData() {
  getSiteSetting(getType.value).then((res) => {
    siteSetting.value = res.data
  })
}

function saveData() {
  $message.loading('loading...')
  //console.log(JSON.stringify(siteSetting.value, null, 2))
  const res = saveSiteSetting(siteSetting.value)
  $message.success('保存成功')
}
</script>

<style scoped>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
</style>
